<template>
<!--

    :maskStyle="maskStyle"
    :getContainer="getContainer"
    :wrap-style="{ position: 'absolute' }" 
-->
<a-drawer
    :destroyOnClose="true"
    :title="title"
    :placement="placement"
    :closable="closable"
    :visible="visible"
    :maskClosable="maskClosable"
    :width="width"
    :mask="true"
    @close="cancel">
        <a-spin :spinning="confirmLoading">
            <div class="table-page-search-wrapper">
                <LForm v-if="formAttributes" ref="LForm" @clickEventHandler="clickEventHandler"  @changeEventHandler="changeEventHandler"  :formAttributes="formAttributes" :mostColumns="mostColumns" :labelCol="labelCol" :wrapperCol="wrapperCol"></LForm>
            
                <!--加载动态传入的组件-->
                <component v-if="component" :is="component" :componentParam="componentParam" @handleComponentCallback="handleComponentCallback"></component>
            </div>
           <div style="height:30px;"></div>
        </a-spin>
        

      <div class="drawer-bootom-button" v-if="localIsShowBootomButton">
            <!-- <a-popconfirm title="确定放弃操作？" @confirm="cancel" okText="确定" cancelText="取消">
                <a-button shape="round" style="margin-right: .8rem">取消</a-button>
            </a-popconfirm> -->
            <template v-if="drawerButton && drawerButton.length>0">
                <a-button style="margin-right: .8rem" v-for="(btn,i) in drawerButton" :key="i" :icon="btn.icon || ''" :type="btn.type || 'primary'"  :shape="btn.shape || 'round'" :size="btn.size || 'default'"  @click="btnClick(btn.emit)" >{{btn.label}}</a-button>
            </template>
            <template v-else>
                <a-button shape="round" @click="cancel" style="margin-right: .8rem">取消</a-button>
                <a-button shape="round" @click="ok" type="primary" >提交</a-button>
            </template>
            
        </div>
    </a-drawer>
   
</template>

<script>
import LForm from './LForm'
export default {
    name:'LDrawerForm',
    components:{LForm},
    props:{
        mostColumns:{
            type:Number,
            default:1
        },
        formAttributes:{
           type:Object,
           default:()=>{}
        },
        component:Object | Function,
        componentParam:{
            type:Object,
            default:()=>{}
        },
        title:String,
        width:{
            type:Number,
            default:600
        },
        visible:{
            type:Boolean,
            default:false
        },
        placement:{
            type:String,
            default:'right'
        },
        maskClosable:{
            type:Boolean,
            default:true
        },
        confirmLoading:{
            type:Boolean,
            default:false
        },
        closable:{
            type:Boolean,
            default:true
        },
        labelCol:{
            type:Object,
            default:function(){
                return {sm: { span: 6 }}
            }
        },
        wrapperCol:{
            type:Object,
            default:function(){
                return {sm: { span: 18 }}
            }
        },
        isShowBootomButton:{
            type:Boolean,
            default:true
        },
        drawerButton:Array,
        maskStyle:{
            type:Object,
            default:function(){
                return {backgroundColor:'rgba(0,0,0,0.3)'}
            }
        },
        getContainer:{
            type:String,
            default:'body'
            // default:'.sys-right-content'
        }
      
    },
    data(){
        return{
            height:document.documentElement.clientHeight-150,
            localIsShowBootomButton:this.isShowBootomButton,//是否显示提交按钮
            
        }
    },
    created(){

    },
    computed:{
       
    },
    watch:{
        
    },
    methods:{
        ok(){
            this.$emit('handleOk');
        },
        cancel(){
            this.$emit('handleCancel');
        },
        /**
         * 获取form对象
         */
        getForm(){
            return this.$refs.LForm.form
        },
       
        setIsShowBootomButton(isShow){
            this.localIsShowBootomButton = isShow
        },
        btnClick(emit){
            this.$emit(emit); 
        },
        handleComponentCallback(result){
            this.$emit('handleComponentCallback',result);
        },
        changeEventHandler(changeItem){
            this.$emit('changeEventHandler',changeItem);
        },
        clickEventHandler(field,form){
            this.$emit('clickEventHandler',field,form);
        },
    }

}
</script>

<style  scoped lang="less">
  .drawer-bootom-button {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 10px 16px;
    left: 0;
    text-align: right;
    border-top: 1px solid var(--component-border-color) !important;
    background: var(--drawer-header-background-color) !important;
    border-radius: 0 0 2px 2px;
    z-index: 999999;
  }

</style>